<template>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
            <el-row>
                <#list formList as field>
                    <el-col :span="24">
                    <#if field.formType == 'text'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-input v-model="dataForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                        </el-form-item>
                    <#elseif field.formType == 'textarea'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-input type="textarea" v-model="dataForm.${field.attrName}"></el-input>
                        </el-form-item>
                    <#elseif field.formType == 'editor'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-input type="textarea" v-model="dataForm.${field.attrName}"></el-input>
                        </el-form-item>
                    <#elseif field.formType == 'select'>
                        <#if field.formDict??>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <fast-select v-model="dataForm.${field.attrName}" dict-type="${field.formDict}" placeholder="${field.fieldComment!}"></fast-select>
                            </el-form-item>
                        <#else>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-select v-model="dataForm.${field.attrName}" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </#if>
                    <#elseif field.formType == 'radio'>
                        <#if field.formDict??>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <fast-radio-group v-model="dataForm.${field.attrName}" dict-type="${field.formDict}"></fast-radio-group>
                            </el-form-item>
                        <#else>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-radio-group v-model="dataForm.${field.attrName}">
                                    <el-radio :label="0">启用</el-radio>
                                    <el-radio :label="1">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </#if>
                    <#elseif field.formType == 'checkbox'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-checkbox-group v-model="dataForm.${field.attrName}">
                                <el-checkbox label="启用" name="type"></el-checkbox>
                                <el-checkbox label="禁用" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    <#elseif field.formType == 'date'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-date-picker type="date" placeholder="${field.fieldComment!}" v-model="dataForm.${field.attrName}"></el-date-picker>
                        </el-form-item>
                    <#elseif field.formType == 'datetime'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-date-picker type="datetime" placeholder="${field.fieldComment!}" v-model="dataForm.${field.attrName}"></el-date-picker>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-input v-model="dataForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                        </el-form-item>
                    </#if>
                    </el-col>
                </#list>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submitHandle()">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {use${FunctionName}Api, use${FunctionName}SubmitApi} from '@/api/${moduleName}/${functionName}'

    export default {
        name: 'AddOrUpdate',
        data() {
            return {
                visible: false,
                dataForm: {
                    <#list fieldList as field>
                    ${field.attrName}: ''<#sep>,
                    </#list>
                },
                dataRules: {
                    <#list formList as field>
                    <#if field.formRequired>
                    ${field.attrName}: [{required: true, message: '必填项不能为空', trigger: 'blur'}]<#sep>,
                    </#if>
                    </#list>
                }
            }
        },
        methods: {
            init(id) {
                this.visible = true
                this.dataForm.id = ''
                const formInstance = this.$refs.dataFormRef
                if (formInstance) {
                    formInstance.resetFields()
                }
                if (id) {
                    this.get${FunctionName}(id)
                }
            },
            get${FunctionName}(id) {
                use${FunctionName}Api(id).then(res => {
                    Object.assign(this.dataForm, res.data)
                })
            },
            submitHandle() {
                this.$refs.dataFormRef.validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    use${FunctionName}SubmitApi(this.dataForm).then(() => {
                        this.$message.success({
                            message: '操作成功',
                            duration: 500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                })
            }
        }
    }
</script>
